import React, {PureComponent} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts';
import baseChart from './base-chart'
import {setTitle, scale, tooltip, baseTextStyle, colors} from '../chart/util/common'

class Pie extends PureComponent {
    componentWillReceiveProps(nextProps) {
        const {config, setChartInstance} = nextProps
        this.myChart.setOption({
            title: setTitle({text: config.title}),
            series: [{
                name: config.title,
                startAngle: config.startAngle || 0,
                data: config.data
            }],
        });
        config.option && this.myChart.setOption(config.option);

    }

    componentDidMount() {
        const {config, setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
            }
        };

        const option = {
            color: colors,
            tooltip: {
                ...tooltip,
                trigger: 'item',
                formatter: "{a} <br/>{b}:{d}%"
            },
            title: setTitle({text: config.title}),
            grid: {
                left: '5%',
                right: '5%',
                top: '40%',
                bottom: 34 * scale,
                containLabel: true
            },
            // startAngle: 90,

            series: [{
                name: config.title,
                type: 'pie',
                radius: [0, '40%'],
                itemStyle: dataStyle,
                // startAngle: 180,
                label: {
                    normal: {
                        show: true,
                        ...baseTextStyle,
                        formatter: '{b}\n{d}%'
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 8 * scale,
                        length2: 8 * scale,
                        lineStyle: {
                            width: scale
                        }
                    }
                },
                data: config.data
            }]
        };

        this.myChart.setOption({...option, ...config.option});

    }

    render = () =>
        <div style={{width: '100%', height: '100%'}} ref='chart'/>


}

export default baseChart(Pie)